<template>
	<view class="groupBox">
		<up-sticky>
			<Header></Header>
		</up-sticky>
		<view class="main">
			<view class="boxOne">
				<view class="boxOneContent">
					<view class="ContentTitle">
						群呼系统
					</view>
					<view class="ContentTexBox">
						<view class="ContentTex">
							上手即用，操作简单，可满足不同企业的需求。
						</view>
						<view class="ContentTex">
							三大运营商优质线路，高并发防封
						</view>
					</view>
					<view class="ContentBut" @click="handleShowSignup">
						申请试用
					</view>
				</view>
			</view>

			<view class="boxTwo">
				<view class="boxTwoContent">
					<view class="boxTwoContent-top">
						你是否在电销中遇到以下问题？
					</view>
					<view class="boxTwoContent-boot">
						<div class="boxXin">
							<image src="../../static/groupImg/qunhuImg3.png" mode=""></image>
						</div>
						<div class="surroundBox">
							<div class="surround surround1">手动拨号效率低</div>
							<div class="surround surround2">坐席通话监管难</div>
							<div class="surround surround3">人工管理成本高</div>
							<div class="surround surround4">坐席情绪难控</div>
							<div class="surround surround5">人员流动大</div>
						</div>
					</view>
				</view>
			</view>

			<view class="boxThree">
				<view class="boxThree-title">
					我们能帮您真正实现
				</view>
				<view class="boxThreeContent">
					<view class="ContentBox-item">
						<view class="Content-img">
							<image src="../../static/groupImg/qunhuImg4.png" mode=""></image>
						</view>
						<view class="Content-text">
							工作效率提高
						</view>
						<view class="Content-cont">
							300%
						</view>
					</view>
					<view class="ContentBox-item">
						<view class="Content-img">
							<image src="../../static/groupImg/qunhuImg5.png" mode=""></image>
						</view>
						<view class="Content-text">
							人工成本降低
						</view>
						<view class="Content-cont" style="color: #f3a307;">
							80%
						</view>
					</view>
					<view class="ContentBox-item">
						<view class="Content-img">
							<image src="../../static/groupImg/qunhuImg6.png" mode=""></image>
						</view>
						<view class="Content-text">
							销售业绩提高
						</view>
						<view class="Content-cont">
							200%
						</view>
					</view>
					<view class="ContentBox-item">
						<view class="Content-img">
							<image src="../../static/groupImg/qunhuImg7.png" mode=""></image>
						</view>
						<view class="Content-text">
							管理成本降低
						</view>
						<view class="Content-cont" style="color: #f3a307;">
							50%
						</view>
					</view>
				</view>
				<!-- <view class="Content-Img">
					<image src="../../static/crmImg/crmImg3.png" mode=""></image>
				</view> -->
			</view>

			<view class="boxFour">
				<view class="boxFour-top">
					产品功能
				</view>
				<view class="boxFour-botto">
					<view class="botto-card">
						<view class="card-img">
							<image src="../../static/groupImg/qunhuImg8.png" mode=""></image>
						</view>
						<view class="card-text">
							智能对话
						</view>
					</view>
					<view class="botto-card">
						<view class="card-img">
							<image src="../../static/groupImg/qunhuImg9.png" mode=""></image>
						</view>
						<view class="card-text">
							多轮对话
						</view>
					</view>
					<view class="botto-card">
						<view class="card-img">
							<image src="../../static/groupImg/qunhuImg10.png" mode=""></image>
						</view>
						<view class="card-text">
							自动重呼
						</view>
					</view>
					<view class="botto-card">
						<view class="card-img">
							<image src="../../static/groupImg/qunhuImg11.png" mode=""></image>
						</view>
						<view class="card-text">
							线路管理
						</view>
					</view>
					<view class="botto-card">
						<view class="card-img">
							<image src="../../static/groupImg/qunhuImg12.png" mode=""></image>
						</view>
						<view class="card-text">
							客户管理
						</view>
					</view>
					<view class="botto-card">
						<view class="card-img">
							<image src="../../static/groupImg/qunhuImg13.png" mode=""></image>
						</view>
						<view class="card-text">
							短信推送
						</view>
					</view>
					<view class="botto-card">
						<view class="card-img">
							<image src="../../static/groupImg/qunhuImg14.png" mode=""></image>
						</view>
						<view class="card-text">
							客户标签
						</view>
					</view>
					<view class="botto-card">
						<view class="card-img">
							<image src="../../static/groupImg/qunhuImg15.png" mode=""></image>
						</view>
						<view class="card-text">
							异常检测
						</view>
					</view>
					<view class="botto-card">
						<view class="card-img">
							<image src="../../static/groupImg/qunhuImg16.png" mode=""></image>
						</view>
						<view class="card-text">
							多维报表
						</view>
					</view>
				</view>
			</view>

			<view class="boxFive">
				<view class="boxFive-title">
					助力企业高效增长
				</view>
				<view class="boxFiveContent">
					<up-scroll-list>
						<view>
							<view class="cardItem">
								<view class="item-box">
									<view class="box-title">
										海量外呼
									</view>
									<view class="box-text">
										客户资料一键批量导入,自动拨打
									</view>

									<view class="box-img">
										<image src="../../static/groupImg/qunhuImg17.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
						<view>
							<view class="cardItem">
								<view class="item-box">
									<view class="box-title">
										语音识别
									</view>
									<view class="box-text">
										系统语音语义识别，真人语音智能交互，客户全程真实沟通感受
									</view>

									<view class="box-img">
										<image src="../../static/groupImg/qunhuImg18.png" mode=""></image>
									</view>
								</view>

							</view>
						</view>
						<view>
							<view class="cardItem">
								<view class="item-box">
									<view class="box-title">
										筛选分类
									</view>
									<view class="box-text">
										根据人机交互内容自动判断客户意向，帮助企业锁定精准客户
									</view>

									<view class="box-img">
										<image src="../../static/groupImg/qunhuImg19.png" mode=""></image>
									</view>
								</view>

							</view>
						</view>
						<view>
							<view class="cardItem">
								<view class="item-box">
									<view class="box-title">
										意向客户管理
									</view>
									<view class="box-text">
										数据智能分析，可根据关键词查找，响应客户群体
									</view>

									<view class="box-img">
										<image src="../../static/groupImg/qunhuImg23.png" mode=""></image>
									</view>
								</view>

							</view>
						</view>
					</up-scroll-list>
				</view>
			</view>

			<view class="boxSix">
				<view class="boxSixOne">
					产品优势
				</view>
				<view class="boxSixTwo">
					<view class="boxSixTwo-box">
						<view class="box-item">
							<view class="text">
								自主研发团队
							</view>

						</view>
						<view class="box-item">
							<view class="text">
								支持定制开发
							</view>

						</view>
						<view class="box-item">
							<view class="text">
								科大讯飞识别
							</view>

						</view>
						<view class="box-item">
							<view class="text">
								多对一售后
							</view>

						</view>
						<view class="box-item">
							<view class="text">
								提供技术支持
							</view>

						</view>
						<view class="box-item">
							<view class="text">
								精准大数据
							</view>

						</view>
						<view class="box-item">
							<view class="text">
								智能触达客户
							</view>
						</view>
						<view class="box-item">
							<view class="text">
								支持培训支持
							</view>
						</view>
					</view>
				</view>
				<view class="boxSixThree">
					<view class="boxSixThreeContent">
						<view class="boxSixThreeContentBox">
							<view class="ContentBoxText">
								语音转文字精准定位客户详情
							</view>
							<view class="ContentBoxImg">
								<image src="../../static/groupImg/qunhuImg21.png" mode=""></image>
							</view>
							<view class="postionImg">
								<image src="../../static/groupImg/qunhuImg22.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<Footer></Footer>
			<up-modal :show="showSignUp" @confirm="handleConfirm" title="立即试用" ref="uModal" @cancel="handleClose"
				showCancelButton cancelText="取消" confirmText="立即拨打">
				<view class="hello">
					<view class="iconfont fa-bodadianhua"></view>
					<view>电话联系:</view>
					<view>13261388898</view>
				</view>
			</up-modal>

		</view>
	</view>
</template>

<script setup>
	import Header from '../compontents/header.vue'
	import Footer from '../compontents/footer.vue'
	import {
		ref
	} from 'vue'
	import api from '../../utils/request.js'
	const tipPlay = ref('立即试用')
	const showSignUp = ref(false)
	const SignUpForm = ref({
		name: "",
		phone: ""
	})
	const signRefForm = ref(null)
	const rules = ref({
		name: [{
			type: 'string',
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change']
		}],
		phone: [{
				type: 'string',
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change']
			},
			{
				// 自定义验证函数，见上说明
				validator: (rule, value, callback) => {
					// 上面有说，返回true表示校验通过，返回false表示不通过
					// uni.$u.test.mobile()就是返回true或者false的
					if (!/^1[3456789]\d{9}$/.test(value)) {
						callback(new Error("手机号码有误，请重填"));
					} else {
						callback();
					}
					// return uni.$u.test.mobile(value);
				},
				message: '手机号码不正确',
				// 触发器可以同时用blur和change
				trigger: ['change', 'blur'],
			}
		]
	})
	const handleShowSignup = function() {
		SignUpForm.value = {
			name: "",
			phone: ""
		}
		showSignUp.value = true;
	}
	const handleClose = function() {
		showSignUp.value = false;
	}
	const handleConfirm = function() {
		uni.makePhoneCall({
			phoneNumber: '13261388898', // 电话号码
			success: function() {
				console.log('拨打电话成功');
			},
			fail: function() {
				console.log('拨打电话失败');
			}
		});

	}
</script>

<style lang="scss" scoped>
	:deep(.u-form-item__body__left__content__label) {
		font-size: 25rpx;
	}

	:deep(.uni-input-placeholder) {
		font-size: 24rpx;
	}

	:deep(.u-input__content__field-wrapper__field) {
		height: 0;
	}

	:deep(.u-modal__button-group__wrapper__text) {
		font-size: 28rpx;
	}

	:deep(.u-modal__title) {
		font-size: 28rpx;
	}

	.hello {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		font-size: 16px;

		.fa-bodadianhua {
			color: #006bec;
		}
	}

	.groupBox {
		width: 100%;

		.main {
			width: 100%;
			overflow-x: hidden;
		}

		.boxOne {
			height: 390rpx;
			background-image: url('../../static/groupImg/qunhuImg1.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 60% center;

			.boxOneContent {
				padding-left: 68rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;


				.ContentTitle {
					color: #2b2c2a;
					font-size: 63rpx;
					font-weight: 600;
				}

				.ContentTexBox {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					color: #909294;
					font-size: 19rpx;
					font-weight: 500;
					gap: 12rpx;
				}

				.ContentBut {
					font-size: 24rpx;
					width: 175rpx;
					height: 58rpx;
					line-height: 58rpx;
					text-align: center;
					color: #fff;
					border-radius: 9rpx;
					background-color: #4771fa;
				}
			}
		}

		.boxTwo {
			height: 677rpx;
			padding: 0 20rpx 90rpx 20rpx;

			.boxTwoContent {
				height: 100%;
				display: flex;
				flex-direction: column;


				.boxTwoContent-top {
					height: 156rpx;
					line-height: 156rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 600;
				}

				.boxTwoContent-boot {
					background-image: url('../../static/groupImg/qunhuImg2.png');
					background-repeat: no-repeat;
					background-size: cover;
					background-position: center center;
					height: calc(100% - 156rpx);
					position: relative;

					.boxXin {
						position: absolute;
						top: calc(50% + 35rpx);
						left: 50%;
						color: #fff;
						transform: translate(-50%, -50%);
						font-size: 20rpx;
						width: 172rpx;
						height: 205rpx;

						image {
							width: 100%;
							height: 100%;
						}

						// box-shadow: 0px 0px 15px #f3f3f3;
					}

					.surroundBox {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);

						.surround {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 172rpx;
							height: 205rpx;
							text-align: center;
							font-size: 22rpx;
							color: #4b4b4b;
							font-weight: 600;
						}

						.surround1 {
							transform: translateX(-90rpx) translateY(-214rpx);
						}

						.surround2 {
							transform: translateX(152rpx) translateY(-46rpx);
						}

						.surround3 {
							transform: translateX(85rpx) translateY(163rpx);
						}

						.surround4 {
							transform: translateX(-256rpx) translateY(160rpx);
						}

						.surround5 {
							transform: translateX(-322rpx) translateY(-46rpx);
						}

					}
				}
			}
		}

		.boxThree {
			height: 426rpx;

			.boxThree-title {
				height: 188rpx;
				line-height: 188rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxThreeContent {
				height: calc(100% - 188rpx);
				display: flex;
				padding: 0 34rpx;
				justify-content: space-evenly;
				align-items: center;
				gap: 25rpx;

				.ContentBox-item {
					width: calc(25% - 25rpx);
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: center;

					.Content-img {
						width: 82rpx;
						height: 73rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.Content-text {
						font-size: 23rpx;
						font-weight: 580;
						color: #4b4b4b;
					}

					.Content-cont {

						color: #3370ff;
						font-size: 29rpx
					}
				}
			}
		}

		.boxFour {
			height: 1002rpx;

			.boxFour-top {
				height: 153rpx;
				text-align: center;
				line-height: 153rpx;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxFour-botto {
				height: calc(100% - 153rpx);
				padding: 0 92rpx;
				display: flex;
				gap: 30rpx;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;

				.botto-card {
					width: calc(33.3% - 30rpx);
					height: 203rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: center;
					gap: 47rpx;

					.card-img {
						width: 123rpx;
						height: 116rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.card-text {
						font-size: 26rpx;
						font-weight: 500;
					}

				}
			}
		}

		.boxFive {
			height: 547rpx;
			background-color: #f2f5f5;
			overflow: hidden;

			.boxFive-title {
				height: 114rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxFiveContent {
				height: calc(100% - 114rpx);
				padding: 24rpx 0 0 34rpx;

				.cardItem {
					width: 210rpx;
					height: 310rpx;
					margin: 0 13rpx;
					padding: 0 15rpx;
					background-color: #fff;
					border-radius: 16rpx;

					.item-box {
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						align-items: center;

						.box-title {
							color: #3b3c3a;
							font-size: 27rpx;
							font-weight: 560;
						}

						.box-text {
							font-size: 21rpx;
							line-height: 35rpx;
							text-align: center;
						}

						.box-img {
							width: 116rpx;
							height: 121rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.boxSix {
			height: 979rpx;

			.boxSixOne {
				height: 119rpx;
				text-align: center;
				line-height: 119rpx;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxSixTwo {
				height: 265rpx;
				padding: 0 85rpx;

				.boxSixTwo-box {
					width: 100%;
					height: 100%;
					display: flex;
					gap: 5rpx;
					flex-wrap: wrap;

					.box-item {
						width: calc(25% - 35rpx);
						height: 103rpx;
						box-shadow: 0 0 15rpx #eee;
						padding: 15rpx;

						.text {
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
							width: 100%;
							height: 100%;
							font-size: 29rpx;
							font-weight: 520;
						}
					}
				}
			}

			.boxSixThree {
				height: calc(100% - 384rpx);
				padding: 20rpx 48rpx;

				.boxSixThreeContent {
					width: 100%;
					height: calc(100% - 40rpx);
					background-image: url('../../static/groupImg/qunhuImg20.png');
					background-repeat: no-repeat;
					background-size: cover;
					background-position: center center;

					.boxSixThreeContentBox {
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						padding: 0 28rpx;
						position: relative;

						.ContentBoxText {
							color: #3370ff;
							font-size: 30rpx;
							font-weight: 500;
							height: 128rpx;
							line-height: 128rpx;
							text-align: center;
						}

						.ContentBoxImg {
							width: calc(100% - 56rpx);
							height: calc(100% - 285rpx);

							image {
								width: 100%;
								height: 100%;
							}
						}

						.postionImg {
							position: absolute;
							right: 72rpx;
							bottom: 158rpx;
							width: 101rpx;
							height: 98rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}
	}
</style>